<!--
 * @Date: 2024-08-16 23:10:46
 * @Autor: 叶世超
 * @LastEditors: 叶世超 yesc163@163.com
 * @LastEditTime: 2024-08-19 16:59:27
 * @FilePath: \ValueAnalysisH5\src\views\home\index.vue
 * @Description: 描述
 * @version: 版本
-->
<template>
  <div class='home'>
    <div class="h-top">
      <div class="h-title">
        常用小工具
      </div>
    </div>
    <div class="h-middle" style="margin-left: 1%;overflow-y: scroll;">
      <el-card style="width: 98%" shadow="hover">
        <el-descriptions title="" column="1">
          <el-descriptions-item>
            <div class="demo-image__preview">
              <svg @click="openOCR" t="1724131326918" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5219" width="128" height="128"><path d="M238.479453 418.108331c-39.464503 0-63.658628 34.233341-63.658628 92.314627s24.271054 95.045601 63.658628 95.045602 64.081737-36.6566 64.081737-95.084066S278.059349 418.108331 238.479453 418.108331zM784.67433 418.916084h-32.31012v80.775299h32.31012c34.233341 0 52.388551-14.924198 52.38855-43.118624s-18.193674-37.656675-52.38855-37.656675z" fill="#C3C2C2" p-id="5220"></path><path d="M901.298475 0H122.701525A122.701525 122.701525 0 0 0 0 122.701525v778.59695a122.701525 122.701525 0 0 0 122.701525 122.701525h778.59695a122.701525 122.701525 0 0 0 122.701525-122.701525V122.701525A122.701525 122.701525 0 0 0 901.298475 0zM238.479453 667.550146c-81.813838 0-137.394937-58.850575-137.394936-157.165652s55.581098-153.857712 137.394936-153.857712 137.433401 56.004207 137.433401 153.857712S320.37022 667.550146 238.479453 667.550146z m309.907896 0c-76.159567 0-140.625948-52.388551-140.625949-153.857711 0-100.007513 66.88964-157.165652 143.049208-157.165653a127.77883 127.77883 0 0 1 91.083765 39.079859l-37.887461 45.926527c-14.924198-13.693336-30.771542-23.347908-52.003907-23.347908-38.65675 0-70.505296 34.617985-70.505296 93.083916 0 59.619863 27.386673 94.276313 69.697543 94.276313 23.771016 0 43.157088-12.07783 57.235069-27.386673l37.96439 44.964916a124.893997 124.893997 0 0 1-97.930433 44.426414z m293.983622-5.65427l-55.234918-105.584855h-34.617985v105.584855h-72.27466v-300.022538h110.008264c64.081737 0 117.278041 21.770866 117.27804 94.314777 0 43.926377-20.540005 72.120802-51.580798 86.660356l66.889641 118.855082z" fill="#C3C2C2" p-id="5221"></path><path d="M238.479453 356.449854c-81.813838 0-137.394937 55.619563-137.394936 153.857711S156.742544 667.550146 238.479453 667.550146s137.433401-58.850575 137.433401-157.165652S320.37022 356.449854 238.479453 356.449854z m0 249.018706c-39.464503 0-63.658628-36.6566-63.658628-95.084066s24.194125-92.314627 63.658628-92.314627 64.081737 34.233341 64.081737 92.314627-24.501841 95.084066-64.081737 95.084066zM907.529712 456.380437c0-72.543911-53.196304-94.314777-117.27804-94.314777h-110.008264v300.022538h72.120802v-105.777177h34.617985l55.388776 105.584855h80.582977l-66.88964-118.855083c30.9254-14.539554 51.465405-42.733979 51.465404-86.660356zM784.67433 499.499061h-32.31012v-80.775299h32.31012c34.233341 0 52.388551 9.269927 52.38855 37.464353s-18.193674 43.310946-52.38855 43.310946zM551.272181 605.46856c-42.310871 0-69.697543-34.617985-69.697543-94.276313 0-58.427466 31.848546-93.083916 70.505296-93.083916 21.386222 0 37.079709 9.654571 52.003906 23.347908l37.887462-45.926527a127.77883 127.77883 0 0 0-91.083765-39.079858c-76.159567 0-143.049207 57.196604-143.049208 157.165652 0 101.54609 64.466381 153.857712 140.625949 153.857712A124.893997 124.893997 0 0 0 646.394711 623.123732l-37.887461-45.157238c-14.077981 15.424236-33.464052 27.502066-57.235069 27.502066z" fill="#5F5F5F" p-id="5222"></path></svg>
              <svg t="1724131604752" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8153" width="128" height="128"><path d="M176.551724 0h570.350345l266.610759 265.163034V1024H176.551724z" fill="#EEF5FF" p-id="8154"></path><path d="M750.344828 0v274.025931h263.168v17.655172H732.689655V0z" fill="#6B6C70" p-id="8155"></path><path d="M746.902069 0l266.610759 265.163034V1024H176.551724V0h570.350345z m-7.291586 17.655172H194.206897v988.689656h801.668413V272.542897L739.610483 17.655172z" fill="#6B6C70" p-id="8156"></path><path d="M459.034483 158.896552a52.965517 52.965517 0 0 1 52.965517 52.965517v123.586207a52.965517 52.965517 0 0 1-52.965517 52.965517H52.965517a52.965517 52.965517 0 0 1-52.965517-52.965517v-123.586207a52.965517 52.965517 0 0 1 52.965517-52.965517h406.068966z m-162.604138 52.965517h-90.394483v141.241379h90.394483v-28.036414l-62.393379-0.017655v-85.150896h62.411034V211.862069z m-114.193655 0H70.62069v139.211034h28.001103v-48.587034h48.004414v-28.036414H98.621793v-34.551172h55.613793v62.640551h28.001104V211.862069zM441.37931 211.862069h-89.953103v139.211034h28.001103l-0.017655-48.587034H441.37931v-28.036414h-61.969655v-34.551172H441.37931V211.862069z m-118.836965 30.790621h-28.018759v78.494896h28.018759v-78.494896z" fill="#A75BC0" p-id="8157"></path><path d="M387.760552 805.040552c35.84 35.663448 93.590069 52.824276 173.267862 51.447172l8.033103-0.211862a3.531034 3.531034 0 0 0 1.765517-6.532414c-56.779034-35.080828-94.772966-72.66869-113.946482-112.816551-15.218759-31.77931-20.780138-61.793103-16.684138-90.006069h93.007448a7.062069 7.062069 0 0 0 5.067035-12.005518l-145.460966-149.362758-0.123586-0.123586a7.062069 7.062069 0 0 0-9.992828 0.123586l-145.44331 149.362758a7.062069 7.062069 0 0 0 5.049379 12.005518l89.193931 0.017655c3.089655 71.150345 21.839448 123.833379 56.267035 158.102069z" fill="#82C840" p-id="8158"></path><path d="M669.537103 564.965517v59.32138h20.656552L690.158345 564.965517h34.180414v59.32138h20.656551V564.965517h34.180414v59.32138h20.656552L799.832276 564.965517h34.198069v59.32138h20.656552L854.669241 564.965517h34.198069v59.32138h20.656552L909.488552 564.965517H935.724138a17.655172 17.655172 0 0 1 17.655172 17.655173v353.103448a17.655172 17.655172 0 0 1-17.655172 17.655172H635.586207a17.655172 17.655172 0 0 1-17.655173-17.655172V582.62069a17.655172 17.655172 0 0 1 17.655173-17.655173h33.950896zM900.413793 874.513655H670.896552V900.413793h229.517241v-25.900138z m0-56.090483H670.896552v25.882483h229.517241v-25.882483z m0-56.108138H670.896552v25.882483h229.517241v-25.882483zM900.413793 706.206897H670.896552v25.900137h229.517241V706.206897z" fill="#84BAF9" p-id="8159"></path></svg>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <OCR ref="ocrRef"></OCR>
  </div>
</template>
<script lang='tsx' setup>
import { ref, reactive } from 'vue'
import * as ResourcesApi from '@/api/infra/resource/correntResources'
import { ElCheckbox, CheckboxValueType, Column } from 'element-plus'
import OCR from '@/views/tools/OCR.vue'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  title: undefined,
  createTime: []
})
const ocrRef = ref()
const openOCR = () => {
  ocrRef.value.open()
}
const loading = ref(false)
const list = ref([])
const total = ref(0)
const radio1 = ref(0)
const radio2 = ref(0)
const formInline = reactive({
  user: '军事简史',
  region: '',
  date: '',
})
const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
// 表格数据
const tableModule = reactive({
  tableData: [
    { fn_title: '老人与海', fn_author: '海明威', SalesVolume: 4972, aaa: 'aaa' },
    { fn_title: '老人与海', fn_author: '海明威', SalesVolume: 4972, aaa: 'aaa' },
    { fn_title: '老人与海', fn_author: '海明威', SalesVolume: 4972, aaa: 'aaa' },
  ], // 表格数据
  currentPage: 1, // 表格分页：当前页
  pageSize: 10, // 表格分页：每页显示条目个数
  count: 1 // 表格分页：总记录数
})
const onSubmit = () => {
  getList()
}

const columns: Column<object>[] = [
  {
    key: 'fn_title',
    title: '书名',
    dataKey: 'fn_title',
    width: 200,
    align: 'center',
    cellRenderer: ({ cellData: fn_title }) => <div>{fn_title}</div>
  },
  {
    key: 'fn_author',
    title: '作者',
    dataKey: 'fn_author',
    width: 200,
    align: 'center',
    cellRenderer: ({ cellData: fn_author }) => <div>{fn_author}</div>
  },
  {
    key: 'SalesVolume',
    title: '销量',
    dataKey: 'SalesVolume',
    width: 200,
    align: 'center',
    cellRenderer: ({ cellData: SalesVolume }) => <div>{SalesVolume}</div>
  },
  {
    key: 'aaa',
    title: '译话数',
    dataKey: 'aaa',
    width: 200,
    align: 'center',
    cellRenderer: ({ cellData: aaa }) => <div>{aaa}</div>
  },
]
const getList = async () => {
  loading.value = true
  try {
    const data = await ResourcesApi.getResourcesPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
</script>
<style lang='scss' scoped>
@media screen and (min-width: 900px) {
  .h-top {
    height: 150px;
    background-size: 100% 100%;
  }

  ::v-deep(.el-input) {
    width: 500px;
  }

}
.icon {
  padding: 20px;
  cursor: pointer;
}
::v-deep(.el-form) {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 100%;
}

::v-deep(.el-form-item) {
  margin: 5px !important;
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .h-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(/src/assets/imgs/topic.png);

    .h-title {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: HarmonyOS Sans SC;
      font-size: 30px;
      font-weight: bold;
      line-height: 18px;
      letter-spacing: 0px;
      font-feature-settings: "kern" on;
      color: #FFFFFF;
    }

    .h-search {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50px;

      ::v-deep(.el-form-item__label) {
        font-family: HarmonyOS Sans SC;
        color: #FFFFFF;
      }
    }
  }


  .h-middle {
    //padding: 20px;
    width: 100%;
    flex: 1;

    ::v-deep(.el-descriptions__label) {
      color: #039595;
      font-weight: 900;
    }

    .demo-image__preview {
      display: flex;
      justify-content: flex-start;

      ::v-deep(.el-image) {
        margin-right: 25px;
      }
    }
  }
}
</style>
